* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background: linear-gradient(100deg, #0aaee0, #f6f7f7);
}
.box {
  margin: 2.083rem;
  display: flex;
  min-height: 1000px;
}
.box .left {
  flex: 6;
}
.box .left .nav {
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 2.083rem;
}
.box .left .nav button {
  width: 4.167rem;
  height: 2.083rem;
  background-color: #0f6bce;
  color: #fff;
  border: 1px solid #0f6bce;
  border-radius: 0.333rem;
}
.box .left .nav input {
  width: 6.25rem;
  height: 2.083rem;
  border: 1px solid #0f6bce;
  border-radius: 0.333rem;
}
.box .left .focus .table {
  border-collapse: collapse;
  border: 1px #ccc solid;
  border-radius: 10px;
}
.box .left .focus .table thead {
  background: linear-gradient(100deg, #4981e9, #f6f7f7);
}
.box .left .focus .table thead th {
  width: 14.583rem;
  height: 2.083rem;
  text-align: center;
  border: solid #ccc 1px;
}
.box .left .focus .table tbody td {
  height: 2.083rem;
  width: 14.583rem;
  text-align: center;
  border: solid #ccc 1px;
}
.box .right {
  flex: 4;
  margin: 2.083rem 0 0 4.167rem;
}
.box .right .top {
  width: 25rem;
  height: 16.667rem;
}
.box .right .bottom {
  width: 25rem;
  height: 16.667rem;
}
